<template>
    <!-- 查询表单 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="商品名称">
            <el-input v-model="formInline.Gname" placeholder="商品名称" clearable />
        </el-form-item>
        <el-form-item label="商品品牌" prop="BG_Id">
            <el-select v-model="formInline.GBId" placeholder="请选择商品品牌">
            <el-option label="请选择商品品牌" :value="-1" />
            <el-option v-for="item in BrandInfo" :label="item.Brand_Name" :value="item.Brand_Id" />
            </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
            <el-input v-model="formInline.MinPrice" placeholder="最低价格" clearable />-
            <el-input v-model="formInline.MaxPrice" placeholder="最高价格" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="LoadGoodsInfo">查询</el-button>
        </el-form-item>
        </el-form>
        <!-- 数据展示 -->
        <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="good_SnowId" label="编号" width="120" />
        <el-table-column prop="Goods_Name" label="商品名称" width="120" />
        <el-table-column prop="Brand_Name" label="商品品牌" width="120" />
        <el-table-column prop="GT_Name" label="商品分类" width="120" />
        <el-table-column prop="Goods_Price" label="商品价格" width="120" >
            <template v-slot="scope">
                <span style="color: red;">{{ scope.row.Goods_Price.toFixed(2) }} CNY</span>
            </template>
        </el-table-column>
        <el-table-column prop="Goods_Img" label="商品图片" width="120" >
            <template v-slot="scope">
                <img :src="scope.row.Goods_Img" style="width: 80px;height: 60px;">
            </template>
        </el-table-column>
        <el-table-column prop="Goods_State" label="商品状态" width="120">
            <template v-slot="scoped">
                <el-tag v-if="scoped.row.Goods_State" type="success">上架</el-tag>
                <el-tag v-else type="danger">上架</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="200" >
            <template v-slot="scope">
                <el-button type="primary" @click="EditGood(scope.row.good_SnowId)">编辑</el-button>
                <el-button type="danger" @click="DelGood(scope.row.Goods_Id)">删除</el-button>
            </template>
        </el-table-column>
        </el-table>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="pageinfo.PageIndex"
      v-model:page-size="pageinfo.PageSize"
      :page-sizes="[1, 2, 5, 10]"
      :size="size"
      background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageinfo.Totalcount"
    />


</template>
  
  <script lang="ts" setup>

  import axios from 'axios';
  import { ref,onMounted, watch } from 'vue';
  import { ElMessage, ElMessageBox, type ComponentSize } from 'element-plus'
  import { useRouter } from 'vue-router';
  
  
  const router=useRouter();
  //生命周期函数钩
onMounted(()=>{
    LoadGoodsInfo()
    LoadBrand()
})
    //删除
    const DelGood=(goodid:number)=>{
        ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        axios.delete("/api/Goods/DelGoodsInfo?Gid="+goodid)
        .then(res=>{
            if(res.data.Data){
                ElMessage({
                type: 'success',
                message: 'Delete completed',
                })
                LoadGoodsInfo()
            }else{
                ElMessage({
                type: 'error',
                message: '删除失败',
                })
            }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })

    }

    //跳转到修改页
    const EditGood=(SnowId:any)=>{
        router.push({
            name:"EditGoods",
            params:{
                Gid:SnowId
            }
        })
    };
    //分页参数
  const pageinfo=ref({
    PageIndex:1,
    PageSize:2,
    Totalcount:0,
    PageCount:0
  })
  //商品信息响应式数据
  const tableData = ref([{
        Goods_Id: 0,
        good_SnowId: "",
        Goods_Name: "",
        BG_Id: 0,
        Brand_Name: "",
        GT_Id: "",
        GT_Name: "",
        Goods_Price: 0,
        Goods_Img: "",
        Goods_Desc: "",
        Goods_IsDelete: true,
        Goods_State: true
  }])
  //加载商品信息
  const LoadGoodsInfo=()=>{
    axios.get("/api/Goods/ShowGoodsInfo",{
        params:{
            Gname:formInline.Gname,
            GBId:formInline.GBId,
            MinPrice:formInline.MinPrice,
            MaxPrice:formInline.MaxPrice,
            pageindex:pageinfo.value.PageIndex,
            pageSize:pageinfo.value.PageSize
        }
    })
    .then(res=>{
        tableData.value=res.data.Data.PageData
        pageinfo.value.Totalcount=res.data.Data.TotalCount
        pageinfo.value.PageCount=res.data.Data.PageCount
    })
  }

  //查询表单
    import { reactive } from 'vue'

    const formInline = reactive({
    Gname: '',
    GBId: -1,
    MinPrice: '',
    MaxPrice:''
    })
    //创建响应式数据完成商品加载
    const BrandInfo=ref([{
        "Brand_Id": 0,
        "Brand_Name": ""
    }])
    //加载品牌信息
    const LoadBrand=()=>{
        axios.get("/api/Goods/ShowGoodsBrand")
        .then(res=>{
            if(res.data.Code==200){
                BrandInfo.value=res.data.Data
            }
        })
        .catch(error=>{
            console.log(error)
        })
    }
    //分页
    const size = ref<ComponentSize>('default')

    //侦听器
   watch(pageinfo,()=>{
    LoadGoodsInfo()
   },{deep:true})

  </script>
  <style>
  .demo-form-inline .el-input {
    --el-input-width: 220px;
  }
  
  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }

  .demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
  </style>
